<template>
	<el-card>
		<el-form :model="form" ref="form" label-width="100px" class="demo-dynamic">
			<el-form-item v-for="(domain, index) in form.formData" :label="domain.controlLable" :key="index">
				<el-radio-group v-model="domain.controlValue" v-if="'radio'==domain.controlType">
					<el-radio v-for="(defaults,indexd) in domain.controlDefault.split('--__--')" :label=indexd
						:key="indexd">{{defaults}}
					</el-radio>
					<el-button type="primary" @click="submitForm" size="mini" style="" v-if="form.formData.length>0">确 定
					</el-button>
				</el-radio-group>
				<el-input type="textarea" v-model="domain.controlValue" v-if="'textarea'==domain.controlType">
				</el-input>
			</el-form-item>
		</el-form>

		<div v-if="fromData.length > 0" style="margin: 20px auto;border-top: 1px solid #ddd;">
			<div class="historyList historyHead">
				<h3 class="item">审批节点</h3>
				<h3 class="item">审批人</h3>
				<h3 class="item">提报人</h3>
				<h3 class="item">审批时间</h3>
				<h3 class="item">审批意见</h3>
				<h3 class="item">审批批注</h3>
			</div>
			<div class="historyList" v-for="(historyData, index) in fromData" :key="index">
				<h3 class="item">
					<el-popover placement="top" trigger="hover">
						<div class="cell-content">{{historyData.taskNodeName}}</div>
						<p class="overflow" slot="reference">{{historyData.taskNodeName}}</p>
					</el-popover>
				</h3>
				<h3 class="item">{{historyData.createBy}}({{historyData.createName}})</h3>
				<h3 class="item">{{historyData.purchaser}}</h3>
				<h3 class="item">{{historyData.createdDate}}</h3>
				<div v-for="(fistoryFormData, indexH) in historyData.formHistoryDataDTO" :key="indexH">
					<!-- <h3 class="item">{{fistoryFormData.title}}</h3> -->
					<h3 class="item">
						<el-popover placement="top" trigger="hover">
							<div class="cell-content">{{fistoryFormData.value}}</div>
							<p class="overflow" slot="reference">{{fistoryFormData.value}}</p>
						</el-popover>
					</h3>
				</div>
			</div>
		</div>

		<div class="goods-info">
			<goodsInfoBox ref="info" :info="info" :disabel="disabel"></goodsInfoBox>
		</div>



	</el-card>
</template>

<script>
	import { formDataShow, formDataSave } from "@/api/activiti/supplierTask";
	import { historyFromData } from '@/api/activiti/supplierHistoryFormdata';
	import { goodsInfo } from '@/api/activiti/goods';
	import goodsInfoBox from "@/views/supplierActivity/components/goodsInfoBox"
	export default {
		name: 'activitiorder',
		components: {
			goodsInfoBox
		},
		data() {
			return {
				id: '',
				taskId: "",
				definitionKey: '',
				businessKey: '',
				supplierId: "",
				sku: "",
				// 表单参数
				form: {
					formData: []
				},
				fromData: [],
				// 是否显示弹出层
				open: false,
				disabel: true,
				info: {}
			}
		},
		mounted() {
			this.from = this.$route.query.from
			this.taskId = this.$route.query.taskId;
			this.definitionKey = this.$route.query.definitionKey
			this.businessKey = this.$route.query.businessKey
			this.supplierId = this.$route.query.supplierId
			this.sku = this.$route.query.sku

			if (this.from != 'done' && this.from != 'leave' && this.type != 'all') {
				this.getDetail();
			}
			this.getHistoryList();
		},
		methods: {
			getDetail() {
				formDataShow(this.taskId).then(response => {
					var datas = response;
					var formData = [];
					for (var i = 0; i < datas.length; i++) {
						var strings = datas[i].split('--__!!')
						var controlValue = null
						var controlDefault = null
						switch (strings[1]) {
							case 'radio':
								controlValue = 0;
								controlDefault = strings[4]
								break;
						}
						formData.push({
							controlId: strings[0],
							controlType: strings[1],
							controlLable: strings[2],
							controlIsParam: strings[3],
							controlValue: controlValue,
							controlDefault: controlDefault
						})
					}
					this.form.formData = formData;
					this.getGoodsInfo();
				});
			},
			getHistoryList() {
				historyFromData(this.businessKey).then(response => {
					this.fromData = response
				})
			},
			/** 提交按钮 */
			submitForm() {
				formDataSave(this.taskId, this.form.formData).then(response => {
					if (response.code == 200) {
						this.$message.success('审批成功');
						this.$router.go(-1)
					} else {
						this.$message.error('审批失败');
					}
				});
			},
			getGoodsInfo() {
				goodsInfo(this.supplierId, this.sku).then(res => {
					this.info = res;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.order-detail {
		padding: 40px 30px;
		margin-bottom: 30px;

		.order-block {
			padding-bottom: 28px;
			border-bottom: 1px solid #d4dce7;

			.title {
				padding: 20px 0 10px;
				font-size: 16px;
			}
		}

		.steps {
			display: flex;
			align-items: center;
			padding: 10px 20px;

			.steps-block {
				display: flex;
				flex-direction: column;
				width: 160px;
				height: 95px;
				align-items: center;

				span {
					// padding: 3px 0;
				}

				i {
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 5px auto;
					width: 38px;
					height: 38px;
					font-size: 28px;
					color: #fff;
					background: #999;
					border-radius: 50%;
				}

				&.on i {
					background: #ff9000;
				}
			}

			.arrow {
				margin-bottom: 40px;
				width: 120px;
				height: 8px;
				background: url('../../../assets/mall-images/steps-arrow.png') no-repeat;
				background-size: 100% 100%;
				background-position: center center;

			}
		}

		// 重置form样式
		.el-form-item {
			margin-bottom: 0;
		}

		// 打印按钮
		.print {
			padding-top: 50px;
			text-align: center;
		}

		// 合计
		.sum-box {
			padding-top: 20px;
			text-align: right;
			color: $--color-danger;
			font-size: 14px;

			.sumBudget {
				font-size: 20px;
			}
		}
	}

	.order-print {
		padding: 0 20px;
		color: #303133;

		&-title {
			font-size: 20px;
			text-align: center;
			padding-bottom: 10px;
		}

		&-body {
			margin: 15px 0;
			font-size: 14px;
			border-top: 1px solid #d8d8d8;
			border-left: 1px solid #d8d8d8;

			&-row {
				display: flex;
				border-bottom: 1px solid #d8d8d8;

				.col-title {
					flex: 0 0 100px;
					font-weight: bold;
					padding: 5px;
					border-right: 1px solid #d8d8d8;
				}

				.col2-title {
					flex: 1;
					font-weight: bold;
					padding: 5px;
					border-right: 1px solid #d8d8d8;
					text-align: center;

					&.goodname {
						flex: 0 0 540px;
					}
				}

				.col2-cont {
					flex: 1;
					padding: 5px;
					border-right: 1px solid #d8d8d8;
					text-align: center;

					&.goodname {
						flex: 0 0 540px;
					}
				}

				.col-cont {
					flex: 1;
					padding: 5px;
					border-right: 1px solid #d8d8d8;
				}
			}
		}

		&-desc {
			.title {
				font-weight: bold;
			}

			.el-row {
				margin: 6px 0;
			}
		}

		&-seal {
			text-align: right;

			img {
				height: 240px;
			}
		}

		.invoice {
			width: 100%;
			border-collapse: collapse;
			border-right: 1px solid #d8d8d8;
			border-bottom: 1px solid #d8d8d8;

			tr td {
				padding: 5px;
				border-left: 1px solid #d8d8d8;
				border-top: 1px solid #d8d8d8
			}

			&-head {
				font-weight: bold;
			}

			&-content {
				text-align: left !important;
			}
		}
	}

	.btn-print {
		text-align: center;
	}

	.historyHead {
		background: #f5f7fa;
	}

	.historyList {
		width: 100%;
		overflow: hidden;
		border-left: 1px solid #ddd;
		border-bottom: 1px solid #ddd;

		.item {
			float: left;
			width: calc(100% / 6);
			border-right: 1px solid #ddd;
			height: 35px;
			line-height: 35px;
			text-align: center;
		}
	}


	// 订单列表
	.order-list {
		width: 100%;

		&-item {
			margin-bottom: 20px;
			border: 2px solid #e8ecf2;

			&-infor {
				padding: 16px 0 10px;
				background: #e5e5e5;

				.el-form-item {
					margin-bottom: 0;
				}
			}

			&-child {
				&-infor {
					display: flex;
					padding: 16px 0 10px;
					border-top: 2px solid #e8ecf2;

					.el-form-item {
						margin-bottom: 0;
					}

					.action {
						flex: 0 0 110px;
						text-align: center;
					}
				}
			}
		}

		.child-body {
			padding-left: 18px;

			// 商品
			&-box {
				flex: 1;

				&-cur {
					padding: 20px;
					height: 100px;
					box-sizing: border-box;
					border-bottom: 2px solid #e8ecf2;

					&:first-child {
						border-top: 2px solid #e8ecf2;
					}

					&:last-child {
						border-bottom: none;
					}

					img {
						width: 68px;
						height: 68px;
						border: 1px solid #e8ecf2;
					}

					.goodsname {
						flex: 0 0 280px;
						height: 40px;
					}
				}
			}

			// 按钮
			&-btns {
				border-top: 2px solid #e8ecf2;
				border-left: 2px solid #e8ecf2;
				padding: 10px 0;
				flex: 0 0 110px;

				.el-button {
					padding: 5px 0;
					margin: 0 auto;
				}
			}
		}
	}

	.control-box {
		margin-bottom: 10px;
	}

	.text-right {
		text-align: right;
	}

	.pd5 {
		padding: 5px;
	}

	.lineHeight20 {
		line-height: 20px;
	}

	h4 {
		line-height: 30px;
	}

	.order-manager .el-dialog__body {
		height: 70vh;
		overflow-y: auto;
	}
</style>
